<template>
    <el-card
        v-loading.body="isLoading"
        id="dishSalesList"
        ref="dishSalesList"
        class="box-card">
            图书销量排行榜
    </el-card>
</template>

<script>
    export default {
        name: "DishSalesList",
        data(){
            return {
                isLoading:true
            }

        },
        methods:{
            initChart(xData,realData){
              // 定义使用的颜色数组
                const myChart =
                    this.$echarts.init(document.getElementById('dishSalesList'));
                myChart.setOption({
                    title: {
                        text: '销量前十榜'
                    },
                    tooltip: {},
                    xAxis: {
                        type: "category",
                        data: xData,
                        axisLabel: {
                          interval:0,
                          formatter:function(value){
                            let str = "";
                            let num = 4; //每行显示字数
                            let valLength = value.length; //该项x轴字数
                            let rowNum = Math.ceil(valLength / num); // 行数
                            if(rowNum > 1) {
                              for(let i = 0; i < rowNum; i++) {
                                let temp = "";
                                let start = i * num;
                                let end = start + num;
                                temp = value.substring(start, end) + "\n";
                                str += temp;
                              }
                              return str;
                            } else {
                              return value;
                            }
                          }
                      }

                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: realData
                        }
                    ],

                });
                this.isLoading=false
            },
           async getDishRank(){
              const{data:res}=await  this.$http.get("/dish/getDishRank/10");
              if (res.status===200){
                  let xData=[];
                  let realData=[]
                  let colorList=["#0780cf","#765005","#fa6d1d",
                                 "#0e2c82","#b6b51f","#da1f18",
                                  "#701866", "#f47a75" ,"#009db2" ,
                                  "#024b51" , "#0780cf" ,"#765005"]
                  let data=res.data
                    data.forEach(dishRank=>{
                        let xDataItem={
                          value: dishRank.name,
                          textStyle: {
                            fontSize: 12,
                            fontFamily: "Arial"
                          }
                        }
                        let realDataItem={
                          value: dishRank.value,
                          // 设置单个柱子的样式
                          itemStyle: {
                            color: colorList.shift()
                          }
                        }
                        xData.push(xDataItem);
                        realData.push(realDataItem)
                    });
                  this.initChart(xData,realData)
              }
            }
        },
        mounted() {
           this.getDishRank();
        }
    }
</script>

<style scoped>
    .box-card{
        width: 100%;
        height: 330px;
    }
</style>
